<!-- 高亮流程图 示例页面，仅供参考-->
<template>
  <!-- 高亮流程图 -->
  <el-card class="box-card">
    <template #header>
      <span class="el-icon-picture-outline">参考流程图示例代码</span>
    </template>
    <!-- <ProcessInstanceBpmnViewer
      :id="`${id}`"
      :bpmn-xml="bpmnXML"
      :loading="processInstanceLoading"
      :process-instance="processInstance"
      :tasks="tasks"
    />
    <BpmProcessViewer
      v-if="loadedData"
      key="demoInstanceProcessViewer"
      :value="bpmnControlForm.bpmnXml"
      :activityData="bpmnControlForm.activityList"
      :processInstanceData="bpmnControlForm.processInstance"
      :taskData="bpmnControlForm.tasks"
    /> -->
    <el-button type="primary" @click="loadDataBtn1">模拟数据加载1</el-button>
    <el-button type="primary" @click="loadDataBtn2">模拟数据加载2</el-button>
    <el-button type="primary" @click="clearDataBtn">清除数据</el-button>
    
    <!-- <BpmProcessViewer
      v-if="loadedData"
      key="demoInstanceProcessViewer"
      v-model:value="bpmnControlForm.bpmnXml"
      :activityData="bpmnControlForm.activityList"
      :processInstanceData="bpmnControlForm.processInstance"
      :taskData="bpmnControlForm.tasks"
    />-->
    <BpmProcessViewer v-if="loadedData" key="processViewerxx" :value="bpmnControlForm.bpmnXML" v-bind="bpmnControlForm"/>
    <!-- 
    <BpmProcessViewer v-if="loadedData" key="processViewerxx" v-bind="bpmnControlForm"/>
    <BpmProcessViewer v-if="loadedData" key="processViewerxx" :value="bpmnControlForm.bpmnXML" v-bind="bpmnControlForm"/> -->
  </el-card>
</template>

<script setup >
import BpmProcessViewer from "@/components/bpmnProcess/viewer/BpmProcessViewer";
import ReqTool from '@/utils/request-tool'

defineOptions({ name: "ProcessInstanceDemo" });

const { proxy } = getCurrentInstance();
const req = new ReqTool(proxy);

const bpmnControlForm = reactive({
  prefix: "activiti",
  processId: '__bpm_model_key',//显示弹窗前前进行替换
  processName: '__bpm_model_name',//显示弹窗前前进行替换
  activityData: [],
  processInstanceData: {},
  taskData: [],
  bpmnXML: null
});

const loadedData = ref(false);

function loadDataBtn1(){
  //示例数据2
  bpmnControlForm.activityData = 
  [
    {
        "key": "Event_1cdh08d",
        "type": "startEvent",
        "startTime": 1674486621897,
        "endTime": 1674486621898,
        "taskId": null
    },
    {
        "key": "Flow_0ski964",
        "type": "sequenceFlow",
        "startTime": 1674486621898,
        "endTime": 1674486621898,
        "taskId": null
    },
    {
        "key": "task01",
        "type": "userTask",
        "startTime": 1674486621898,
        "endTime": 1674531211514,
        "taskId": "0e4c739b-9b30-11ed-93bb-b29457079be3"
    },
    {
        "key": "Flow_04zh2qw",
        "type": "sequenceFlow",
        "startTime": 1674531211518,
        "endTime": 1674531211518,
        "taskId": null
    },
    {
        "key": "task02",
        "type": "userTask",
        "startTime": 1674531211523,
        "endTime": null,
        "taskId": "dfc96c42-9b97-11ed-93bb-b29457079be3"
    }
  ]

  bpmnControlForm.processInstanceData =     
  {
    "id": "0e4b3b11-9b30-11ed-93bb-b29457079be3",
    "name": "测试流程",
    "category": "1",
    "status": 1,
    "result": "waiting_approval",
    "createTime": 1674486622000,
    "endTime": null,
    "formVariables": {
        "F5oy5xmymr12p": 1,
        "Fywp5xmymr876": "2023-01-02"
    },
    "businessKey": null,
    "startUser": {
        "id": 1,
        "nickname": "芋道源码",
        "deptId": 103,
        "deptName": "研发部门"
    },
    "processDefinition": {
        "id": "test:10:64457386-9b08-11ed-93bb-b29457079be3",
        "formType": 10,
        "formId": 23,
        "formConf": "{\"form\":{\"labelPosition\":\"right\",\"size\":\"default\",\"labelWidth\":\"125px\",\"hideRequiredAsterisk\":false,\"showMessage\":true,\"inlineMessage\":false},\"submitBtn\":{\"show\":true,\"innerText\":\"提交\"},\"resetBtn\":{\"show\":true,\"innerText\":\"重置\"}}",
        "formFields": [
            "{\"type\":\"select\",\"field\":\"F5oy5xmymr12p\",\"title\":\"选择器\",\"info\":\"\",\"effect\":{\"fetch\":\"\"},\"options\":[{\"label\":\"选项1\",\"value\":1},{\"label\":\"选项2\",\"value\":2}],\"_fc_drag_tag\":\"select\",\"hidden\":false,\"display\":true}",
            "{\"type\":\"datePicker\",\"field\":\"Fywp5xmymr876\",\"title\":\"日期选择器\",\"info\":\"\",\"_fc_drag_tag\":\"datePicker\",\"hidden\":false,\"display\":true}"
        ],
        "formCustomCreatePath": null,
        "formCustomViewPath": null,
        "bpmnXml": "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<definitions xmlns=\"http://www.omg.org/spec/BPMN/20100524/MODEL\" xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" xmlns:xsd=\"http://www.w3.org/2001/XMLSchema\" xmlns:flowable=\"http://flowable.org/bpmn\" xmlns:bpmndi=\"http://www.omg.org/spec/BPMN/20100524/DI\" xmlns:omgdc=\"http://www.omg.org/spec/DD/20100524/DC\" xmlns:omgdi=\"http://www.omg.org/spec/DD/20100524/DI\" xmlns:bpmn2=\"http://www.omg.org/spec/BPMN/20100524/MODEL\" xmlns:dc=\"http://www.omg.org/spec/DD/20100524/DC\" xmlns:di=\"http://www.omg.org/spec/DD/20100524/DI\" typeLanguage=\"http://www.w3.org/2001/XMLSchema\" expressionLanguage=\"http://www.w3.org/1999/XPath\" targetNamespace=\"http://flowable.org/bpmn\" id=\"diagram_Process_1657960588001\">\n  <process id=\"test\" name=\"测试流程\" isExecutable=\"true\">\n    <startEvent id=\"Event_1cdh08d\"></startEvent>\n    <userTask id=\"task01\" name=\"领导审批\"></userTask>\n    <sequenceFlow id=\"Flow_0ski964\" sourceRef=\"Event_1cdh08d\" targetRef=\"task01\"></sequenceFlow>\n    <userTask id=\"task02\" name=\"HR 审批\"></userTask>\n    <sequenceFlow id=\"Flow_04zh2qw\" sourceRef=\"task01\" targetRef=\"task02\"></sequenceFlow>\n    <endEvent id=\"Event_071a8ic\"></endEvent>\n    <sequenceFlow id=\"Flow_0tc28rh\" sourceRef=\"task02\" targetRef=\"Event_071a8ic\"></sequenceFlow>\n  </process>\n  <bpmndi:BPMNDiagram id=\"BPMNDiagram_test\">\n    <bpmndi:BPMNPlane bpmnElement=\"test\" id=\"BPMNPlane_test\">\n      <bpmndi:BPMNShape bpmnElement=\"Event_1cdh08d\" id=\"BPMNShape_Event_1cdh08d\">\n        <omgdc:Bounds height=\"36.0\" width=\"36.0\" x=\"242.0\" y=\"312.0\"></omgdc:Bounds>\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape bpmnElement=\"task01\" id=\"BPMNShape_task01\">\n        <omgdc:Bounds height=\"80.0\" width=\"100.0\" x=\"360.0\" y=\"290.0\"></omgdc:Bounds>\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape bpmnElement=\"task02\" id=\"BPMNShape_task02\">\n        <omgdc:Bounds height=\"80.0\" width=\"100.0\" x=\"530.0\" y=\"290.0\"></omgdc:Bounds>\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape bpmnElement=\"Event_071a8ic\" id=\"BPMNShape_Event_071a8ic\">\n        <omgdc:Bounds height=\"36.0\" width=\"36.0\" x=\"692.0\" y=\"312.0\"></omgdc:Bounds>\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNEdge bpmnElement=\"Flow_0ski964\" id=\"BPMNEdge_Flow_0ski964\">\n        <omgdi:waypoint x=\"278.0\" y=\"330.0\"></omgdi:waypoint>\n        <omgdi:waypoint x=\"360.0\" y=\"330.0\"></omgdi:waypoint>\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge bpmnElement=\"Flow_04zh2qw\" id=\"BPMNEdge_Flow_04zh2qw\">\n        <omgdi:waypoint x=\"460.0\" y=\"330.0\"></omgdi:waypoint>\n        <omgdi:waypoint x=\"530.0\" y=\"330.0\"></omgdi:waypoint>\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge bpmnElement=\"Flow_0tc28rh\" id=\"BPMNEdge_Flow_0tc28rh\">\n        <omgdi:waypoint x=\"630.0\" y=\"330.0\"></omgdi:waypoint>\n        <omgdi:waypoint x=\"692.0\" y=\"330.0\"></omgdi:waypoint>\n      </bpmndi:BPMNEdge>\n    </bpmndi:BPMNPlane>\n  </bpmndi:BPMNDiagram>\n</definitions>"
    }
  }

  bpmnControlForm.taskData =[{
      "id": "dfc96c42-9b97-11ed-93bb-b29457079be3",
      "name": "HR 审批",
      "claimTime": null,
      "createTime": 1674531212000,
      "suspensionState": null,
      "processInstance": {
          "id": "0e4b3b11-9b30-11ed-93bb-b29457079be3",
          "name": "测试流程",
          "startUserId": 1,
          "startUserNickname": "芋道源码",
          "processDefinitionId": "test:10:64457386-9b08-11ed-93bb-b29457079be3"
      },
      "endTime": null,
      "durationInMillis": null,
      "result": "waiting_approval",
      "reason": null,
      "definitionKey": "task02",
      "assigneeUser": {
          "id": 104,
          "nickname": "测试号",
          "deptId": 107,
          "deptName": "运维部门"
      },
      "parentTaskId": null,
      "children": null
  },
  {
      "id": "0e4c739b-9b30-11ed-93bb-b29457079be3",
      "name": "领导审批",
      "claimTime": null,
      "createTime": 1674486622000,
      "suspensionState": null,
      "processInstance": {
          "id": "0e4b3b11-9b30-11ed-93bb-b29457079be3",
          "name": "测试流程",
          "startUserId": 1,
          "startUserNickname": "芋道源码",
          "processDefinitionId": "test:10:64457386-9b08-11ed-93bb-b29457079be3"
      },
      "endTime": 1674531211000,
      "durationInMillis": 44589594,
      "result": "pass",
      "reason": "123",
      "definitionKey": "task01",
      "assigneeUser": {
          "id": 1,
          "nickname": "芋道源码",
          "deptId": 103,
          "deptName": "研发部门"
      },
      "parentTaskId": null,
      "children": null
  }
  ]

  bpmnControlForm.bpmnXML =     '<?xml version="1.0" encoding="UTF-8"?>\n<definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:flowable="http://flowable.org/bpmn" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:omgdc="http://www.omg.org/spec/DD/20100524/DC" xmlns:omgdi="http://www.omg.org/spec/DD/20100524/DI" xmlns:bpmn2="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" typeLanguage="http://www.w3.org/2001/XMLSchema" expressionLanguage="http://www.w3.org/1999/XPath" targetNamespace="http://flowable.org/bpmn" id="diagram_Process_1657960588001">\n  <process id="test" name="测试流程" isExecutable="true">\n    <startEvent id="Event_1cdh08d"></startEvent>\n    <userTask id="task01" name="领导审批"></userTask>\n    <sequenceFlow id="Flow_0ski964" sourceRef="Event_1cdh08d" targetRef="task01"></sequenceFlow>\n    <userTask id="task02" name="HR 审批"></userTask>\n    <sequenceFlow id="Flow_04zh2qw" sourceRef="task01" targetRef="task02"></sequenceFlow>\n    <endEvent id="Event_071a8ic"></endEvent>\n    <sequenceFlow id="Flow_0tc28rh" sourceRef="task02" targetRef="Event_071a8ic"></sequenceFlow>\n  </process>\n  <bpmndi:BPMNDiagram id="BPMNDiagram_test">\n    <bpmndi:BPMNPlane bpmnElement="test" id="BPMNPlane_test">\n      <bpmndi:BPMNShape bpmnElement="Event_1cdh08d" id="BPMNShape_Event_1cdh08d">\n        <omgdc:Bounds height="36.0" width="36.0" x="242.0" y="312.0"></omgdc:Bounds>\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape bpmnElement="task01" id="BPMNShape_task01">\n        <omgdc:Bounds height="80.0" width="100.0" x="360.0" y="290.0"></omgdc:Bounds>\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape bpmnElement="task02" id="BPMNShape_task02">\n        <omgdc:Bounds height="80.0" width="100.0" x="530.0" y="290.0"></omgdc:Bounds>\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape bpmnElement="Event_071a8ic" id="BPMNShape_Event_071a8ic">\n        <omgdc:Bounds height="36.0" width="36.0" x="692.0" y="312.0"></omgdc:Bounds>\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNEdge bpmnElement="Flow_0ski964" id="BPMNEdge_Flow_0ski964">\n        <omgdi:waypoint x="278.0" y="330.0"></omgdi:waypoint>\n        <omgdi:waypoint x="360.0" y="330.0"></omgdi:waypoint>\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge bpmnElement="Flow_04zh2qw" id="BPMNEdge_Flow_04zh2qw">\n        <omgdi:waypoint x="460.0" y="330.0"></omgdi:waypoint>\n        <omgdi:waypoint x="530.0" y="330.0"></omgdi:waypoint>\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge bpmnElement="Flow_0tc28rh" id="BPMNEdge_Flow_0tc28rh">\n        <omgdi:waypoint x="630.0" y="330.0"></omgdi:waypoint>\n        <omgdi:waypoint x="692.0" y="330.0"></omgdi:waypoint>\n      </bpmndi:BPMNEdge>\n    </bpmndi:BPMNPlane>\n  </bpmndi:BPMNDiagram>\n</definitions>'

  loadedData.value = true;
}

function loadDataBtn2(){
  //示例数据2
  bpmnControlForm.activityData = 
  [
    {
        "key": "sid-590598C4-B0C6-4DCE-8C65-1B4C473964D2",
        "type": "startEvent",
        "startTime": 1674307726407,
        "endTime": 1674307726407,
        "taskId": null
    },
    {
        "key": "sid-C49DB46C-17B9-469E-934C-015637BA86FC",
        "type": "sequenceFlow",
        "startTime": 1674307726408,
        "endTime": 1674307726408,
        "taskId": null
    },
    {
        "key": "task-01",
        "type": "userTask",
        "startTime": 1674307726408,
        "endTime": null,
        "taskId": "8846fd3b-998f-11ed-8497-b29457079be3"
    }
  ]

  bpmnControlForm.processInstanceData =     
  {
    "id": "88450163-998f-11ed-8497-b29457079be3",
    "name": "OA 请假",
    "category": "2",
    "status": 1,
    "result": "waiting_approval",
    "createTime": 1674307726000,
    "endTime": null,
    "formVariables": {
        "day": 0
    },
    "businessKey": "34",
    "startUser": {
        "id": 1,
        "nickname": "芋道源码",
        "deptId": 103,
        "deptName": "研发部门"
    },
    "processDefinition": {
        "id": "oa_leave:4:9a228696-0b26-11ed-a881-427d68986255",
        "formType": 20,
        "formId": null,
        "formConf": null,
        "formFields": null,
        "formCustomCreatePath": "/bpm/oa/leave/create",
        "formCustomViewPath": "/bpm/oa/leave/detail",
        "bpmnXml": "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<definitions xmlns=\"http://www.omg.org/spec/BPMN/20100524/MODEL\" xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" xmlns:xsd=\"http://www.w3.org/2001/XMLSchema\" xmlns:flowable=\"http://flowable.org/bpmn\" xmlns:bpmndi=\"http://www.omg.org/spec/BPMN/20100524/DI\" xmlns:omgdc=\"http://www.omg.org/spec/DD/20100524/DC\" xmlns:omgdi=\"http://www.omg.org/spec/DD/20100524/DI\" typeLanguage=\"http://www.w3.org/2001/XMLSchema\" expressionLanguage=\"http://www.w3.org/1999/XPath\" targetNamespace=\"http://www.activiti.org/processdef\">\n  <process id=\"oa_leave\" name=\"OA 请假\" isExecutable=\"true\">\n    <startEvent id=\"sid-590598C4-B0C6-4DCE-8C65-1B4C473964D2\"></startEvent>\n    <userTask id=\"task-01\" name=\"领导审批\"></userTask>\n    <sequenceFlow id=\"sid-C49DB46C-17B9-469E-934C-015637BA86FC\" sourceRef=\"sid-590598C4-B0C6-4DCE-8C65-1B4C473964D2\" targetRef=\"task-01\"></sequenceFlow>\n    <exclusiveGateway id=\"sid-DF236505-2B41-497B-BB12-D5B36A65A489\" default=\"sid-59046FB9-ABD0-43B6-9FA0-916D6972573A\"></exclusiveGateway>\n    <sequenceFlow id=\"sid-D013FF31-68E1-4326-9A6D-520D9F03F11B\" sourceRef=\"task-01\" targetRef=\"sid-DF236505-2B41-497B-BB12-D5B36A65A489\"></sequenceFlow>\n    <userTask id=\"task-21\" name=\"HR 审批\"></userTask>\n    <endEvent id=\"sid-A0912D5A-0AEF-47E6-A798-A29CE1FAD7FF\"></endEvent>\n    <sequenceFlow id=\"sid-A57EA9A3-6926-415A-92E1-73B7F7D8BA13\" sourceRef=\"task-21\" targetRef=\"sid-A0912D5A-0AEF-47E6-A798-A29CE1FAD7FF\"></sequenceFlow>\n    <sequenceFlow id=\"sid-59046FB9-ABD0-43B6-9FA0-916D6972573A\" name=\"请假小于等于 1 天\" sourceRef=\"sid-DF236505-2B41-497B-BB12-D5B36A65A489\" targetRef=\"sid-A0912D5A-0AEF-47E6-A798-A29CE1FAD7FF\"></sequenceFlow>\n    <sequenceFlow id=\"sid-0CAF1537-A2F7-46D2-9807-77F81C8143A7\" name=\"请假大于 3 天\" sourceRef=\"sid-DF236505-2B41-497B-BB12-D5B36A65A489\" targetRef=\"task-21\">\n      <conditionExpression xsi:type=\"tFormalExpression\"><![CDATA[${day > 3}]]></conditionExpression>\n    </sequenceFlow>\n  </process>\n  <bpmndi:BPMNDiagram id=\"BPMNDiagram_oa_leave\">\n    <bpmndi:BPMNPlane bpmnElement=\"oa_leave\" id=\"BPMNPlane_oa_leave\">\n      <bpmndi:BPMNShape bpmnElement=\"sid-590598C4-B0C6-4DCE-8C65-1B4C473964D2\" id=\"BPMNShape_sid-590598C4-B0C6-4DCE-8C65-1B4C473964D2\">\n        <omgdc:Bounds height=\"30.0\" width=\"30.0\" x=\"203.5\" y=\"208.0\"></omgdc:Bounds>\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape bpmnElement=\"task-01\" id=\"BPMNShape_task-01\">\n        <omgdc:Bounds height=\"80.0\" width=\"100.0\" x=\"285.0\" y=\"183.0\"></omgdc:Bounds>\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape bpmnElement=\"sid-DF236505-2B41-497B-BB12-D5B36A65A489\" id=\"BPMNShape_sid-DF236505-2B41-497B-BB12-D5B36A65A489\">\n        <omgdc:Bounds height=\"40.0\" width=\"40.0\" x=\"423.5\" y=\"203.0\"></omgdc:Bounds>\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape bpmnElement=\"task-21\" id=\"BPMNShape_task-21\">\n        <omgdc:Bounds height=\"80.0\" width=\"100.0\" x=\"525.0\" y=\"60.0\"></omgdc:Bounds>\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape bpmnElement=\"sid-A0912D5A-0AEF-47E6-A798-A29CE1FAD7FF\" id=\"BPMNShape_sid-A0912D5A-0AEF-47E6-A798-A29CE1FAD7FF\">\n        <omgdc:Bounds height=\"28.0\" width=\"28.0\" x=\"750.0\" y=\"209.0\"></omgdc:Bounds>\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNEdge bpmnElement=\"sid-0CAF1537-A2F7-46D2-9807-77F81C8143A7\" id=\"BPMNEdge_sid-0CAF1537-A2F7-46D2-9807-77F81C8143A7\">\n        <omgdi:waypoint x=\"443.0\" y=\"203.0\"></omgdi:waypoint>\n        <omgdi:waypoint x=\"444.0\" y=\"100.0\"></omgdi:waypoint>\n        <omgdi:waypoint x=\"525.0\" y=\"100.0\"></omgdi:waypoint>\n        <bpmndi:BPMNLabel>\n          <omgdc:Bounds height=\"14.0\" width=\"68.0\" x=\"411.0\" y=\"127.0\"></omgdc:Bounds>\n        </bpmndi:BPMNLabel>\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge bpmnElement=\"sid-59046FB9-ABD0-43B6-9FA0-916D6972573A\" id=\"BPMNEdge_sid-59046FB9-ABD0-43B6-9FA0-916D6972573A\">\n        <omgdi:waypoint x=\"464.0\" y=\"223.0\"></omgdi:waypoint>\n        <omgdi:waypoint x=\"750.0\" y=\"223.0\"></omgdi:waypoint>\n        <bpmndi:BPMNLabel>\n          <omgdc:Bounds height=\"14.0\" width=\"90.0\" x=\"464.0\" y=\"198.0\"></omgdc:Bounds>\n        </bpmndi:BPMNLabel>\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge bpmnElement=\"sid-A57EA9A3-6926-415A-92E1-73B7F7D8BA13\" id=\"BPMNEdge_sid-A57EA9A3-6926-415A-92E1-73B7F7D8BA13\">\n        <omgdi:waypoint x=\"625.0\" y=\"132.0\"></omgdi:waypoint>\n        <omgdi:waypoint x=\"752.0\" y=\"215.0\"></omgdi:waypoint>\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge bpmnElement=\"sid-D013FF31-68E1-4326-9A6D-520D9F03F11B\" id=\"BPMNEdge_sid-D013FF31-68E1-4326-9A6D-520D9F03F11B\">\n        <omgdi:waypoint x=\"385.0\" y=\"223.0\"></omgdi:waypoint>\n        <omgdi:waypoint x=\"423.0\" y=\"223.0\"></omgdi:waypoint>\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge bpmnElement=\"sid-C49DB46C-17B9-469E-934C-015637BA86FC\" id=\"BPMNEdge_sid-C49DB46C-17B9-469E-934C-015637BA86FC\">\n        <omgdi:waypoint x=\"233.0\" y=\"223.0\"></omgdi:waypoint>\n        <omgdi:waypoint x=\"285.0\" y=\"223.0\"></omgdi:waypoint>\n      </bpmndi:BPMNEdge>\n    </bpmndi:BPMNPlane>\n  </bpmndi:BPMNDiagram>\n</definitions>"
    }
  }

  bpmnControlForm.taskData =
  [
    {
        "id": "8846fd3b-998f-11ed-8497-b29457079be3",
        "name": "领导审批",
        "claimTime": null,
        "createTime": 1674307726000,
        "suspensionState": null,
        "processInstance": {
            "id": "88450163-998f-11ed-8497-b29457079be3",
            "name": "OA 请假",
            "startUserId": 1,
            "startUserNickname": "芋道源码",
            "processDefinitionId": "oa_leave:4:9a228696-0b26-11ed-a881-427d68986255"
        },
        "endTime": null,
        "durationInMillis": null,
        "result": "waiting_approval",
        "reason": null,
        "definitionKey": "task-01",
        "assigneeUser": {
            "id": 1,
            "nickname": "芋道源码",
            "deptId": 103,
            "deptName": "研发部门"
        },
        "parentTaskId": null,
        "children": null
    }
  ]

  bpmnControlForm.bpmnXML =     '<?xml version="1.0" encoding="UTF-8"?>\n<definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:flowable="http://flowable.org/bpmn" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:omgdc="http://www.omg.org/spec/DD/20100524/DC" xmlns:omgdi="http://www.omg.org/spec/DD/20100524/DI" typeLanguage="http://www.w3.org/2001/XMLSchema" expressionLanguage="http://www.w3.org/1999/XPath" targetNamespace="http://www.activiti.org/processdef">\n  <process id="oa_leave" name="OA 请假" isExecutable="true">\n    <startEvent id="sid-590598C4-B0C6-4DCE-8C65-1B4C473964D2"></startEvent>\n    <userTask id="task-01" name="领导审批"></userTask>\n    <sequenceFlow id="sid-C49DB46C-17B9-469E-934C-015637BA86FC" sourceRef="sid-590598C4-B0C6-4DCE-8C65-1B4C473964D2" targetRef="task-01"></sequenceFlow>\n    <exclusiveGateway id="sid-DF236505-2B41-497B-BB12-D5B36A65A489" default="sid-59046FB9-ABD0-43B6-9FA0-916D6972573A"></exclusiveGateway>\n    <sequenceFlow id="sid-D013FF31-68E1-4326-9A6D-520D9F03F11B" sourceRef="task-01" targetRef="sid-DF236505-2B41-497B-BB12-D5B36A65A489"></sequenceFlow>\n    <userTask id="task-21" name="HR 审批"></userTask>\n    <endEvent id="sid-A0912D5A-0AEF-47E6-A798-A29CE1FAD7FF"></endEvent>\n    <sequenceFlow id="sid-A57EA9A3-6926-415A-92E1-73B7F7D8BA13" sourceRef="task-21" targetRef="sid-A0912D5A-0AEF-47E6-A798-A29CE1FAD7FF"></sequenceFlow>\n    <sequenceFlow id="sid-59046FB9-ABD0-43B6-9FA0-916D6972573A" name="请假小于等于 1 天" sourceRef="sid-DF236505-2B41-497B-BB12-D5B36A65A489" targetRef="sid-A0912D5A-0AEF-47E6-A798-A29CE1FAD7FF"></sequenceFlow>\n    <sequenceFlow id="sid-0CAF1537-A2F7-46D2-9807-77F81C8143A7" name="请假大于 3 天" sourceRef="sid-DF236505-2B41-497B-BB12-D5B36A65A489" targetRef="task-21">\n      <conditionExpression xsi:type="tFormalExpression"><![CDATA[${day > 3}]]></conditionExpression>\n    </sequenceFlow>\n  </process>\n  <bpmndi:BPMNDiagram id="BPMNDiagram_oa_leave">\n    <bpmndi:BPMNPlane bpmnElement="oa_leave" id="BPMNPlane_oa_leave">\n      <bpmndi:BPMNShape bpmnElement="sid-590598C4-B0C6-4DCE-8C65-1B4C473964D2" id="BPMNShape_sid-590598C4-B0C6-4DCE-8C65-1B4C473964D2">\n        <omgdc:Bounds height="30.0" width="30.0" x="203.5" y="208.0"></omgdc:Bounds>\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape bpmnElement="task-01" id="BPMNShape_task-01">\n        <omgdc:Bounds height="80.0" width="100.0" x="285.0" y="183.0"></omgdc:Bounds>\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape bpmnElement="sid-DF236505-2B41-497B-BB12-D5B36A65A489" id="BPMNShape_sid-DF236505-2B41-497B-BB12-D5B36A65A489">\n        <omgdc:Bounds height="40.0" width="40.0" x="423.5" y="203.0"></omgdc:Bounds>\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape bpmnElement="task-21" id="BPMNShape_task-21">\n        <omgdc:Bounds height="80.0" width="100.0" x="525.0" y="60.0"></omgdc:Bounds>\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape bpmnElement="sid-A0912D5A-0AEF-47E6-A798-A29CE1FAD7FF" id="BPMNShape_sid-A0912D5A-0AEF-47E6-A798-A29CE1FAD7FF">\n        <omgdc:Bounds height="28.0" width="28.0" x="750.0" y="209.0"></omgdc:Bounds>\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNEdge bpmnElement="sid-0CAF1537-A2F7-46D2-9807-77F81C8143A7" id="BPMNEdge_sid-0CAF1537-A2F7-46D2-9807-77F81C8143A7">\n        <omgdi:waypoint x="443.0" y="203.0"></omgdi:waypoint>\n        <omgdi:waypoint x="444.0" y="100.0"></omgdi:waypoint>\n        <omgdi:waypoint x="525.0" y="100.0"></omgdi:waypoint>\n        <bpmndi:BPMNLabel>\n          <omgdc:Bounds height="14.0" width="68.0" x="411.0" y="127.0"></omgdc:Bounds>\n        </bpmndi:BPMNLabel>\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge bpmnElement="sid-59046FB9-ABD0-43B6-9FA0-916D6972573A" id="BPMNEdge_sid-59046FB9-ABD0-43B6-9FA0-916D6972573A">\n        <omgdi:waypoint x="464.0" y="223.0"></omgdi:waypoint>\n        <omgdi:waypoint x="750.0" y="223.0"></omgdi:waypoint>\n        <bpmndi:BPMNLabel>\n          <omgdc:Bounds height="14.0" width="90.0" x="464.0" y="198.0"></omgdc:Bounds>\n        </bpmndi:BPMNLabel>\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge bpmnElement="sid-A57EA9A3-6926-415A-92E1-73B7F7D8BA13" id="BPMNEdge_sid-A57EA9A3-6926-415A-92E1-73B7F7D8BA13">\n        <omgdi:waypoint x="625.0" y="132.0"></omgdi:waypoint>\n        <omgdi:waypoint x="752.0" y="215.0"></omgdi:waypoint>\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge bpmnElement="sid-D013FF31-68E1-4326-9A6D-520D9F03F11B" id="BPMNEdge_sid-D013FF31-68E1-4326-9A6D-520D9F03F11B">\n        <omgdi:waypoint x="385.0" y="223.0"></omgdi:waypoint>\n        <omgdi:waypoint x="423.0" y="223.0"></omgdi:waypoint>\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge bpmnElement="sid-C49DB46C-17B9-469E-934C-015637BA86FC" id="BPMNEdge_sid-C49DB46C-17B9-469E-934C-015637BA86FC">\n        <omgdi:waypoint x="233.0" y="223.0"></omgdi:waypoint>\n        <omgdi:waypoint x="285.0" y="223.0"></omgdi:waypoint>\n      </bpmndi:BPMNEdge>\n    </bpmndi:BPMNPlane>\n  </bpmndi:BPMNDiagram>\n</definitions>'

  loadedData.value = true;
}


function clearDataBtn(){
  loadedData.value = false;
}




/*

http://api-dashboard.yudao.iocoder.cn/admin-api/bpm/process-instance/get?id=88450163-998f-11ed-8497-b29457079be3
{
    "code": 0,
    "data": {
        "id": "88450163-998f-11ed-8497-b29457079be3",
        "name": "OA 请假",
        "category": "2",
        "status": 1,
        "result": 1,
        "createTime": 1674307726000,
        "endTime": null,
        "formVariables": {
            "day": 0
        },
        "businessKey": "34",
        "startUser": {
            "id": 1,
            "nickname": "芋道源码",
            "deptId": 103,
            "deptName": "研发部门"
        },
        "processDefinition": {
            "id": "oa_leave:4:9a228696-0b26-11ed-a881-427d68986255",
            "formType": 20,
            "formId": null,
            "formConf": null,
            "formFields": null,
            "formCustomCreatePath": "/bpm/oa/leave/create",
            "formCustomViewPath": "/bpm/oa/leave/detail",
            "bpmnXml": "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<definitions xmlns=\"http://www.omg.org/spec/BPMN/20100524/MODEL\" xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" xmlns:xsd=\"http://www.w3.org/2001/XMLSchema\" xmlns:flowable=\"http://flowable.org/bpmn\" xmlns:bpmndi=\"http://www.omg.org/spec/BPMN/20100524/DI\" xmlns:omgdc=\"http://www.omg.org/spec/DD/20100524/DC\" xmlns:omgdi=\"http://www.omg.org/spec/DD/20100524/DI\" typeLanguage=\"http://www.w3.org/2001/XMLSchema\" expressionLanguage=\"http://www.w3.org/1999/XPath\" targetNamespace=\"http://www.activiti.org/processdef\">\n  <process id=\"oa_leave\" name=\"OA 请假\" isExecutable=\"true\">\n    <startEvent id=\"sid-590598C4-B0C6-4DCE-8C65-1B4C473964D2\"></startEvent>\n    <userTask id=\"task-01\" name=\"领导审批\"></userTask>\n    <sequenceFlow id=\"sid-C49DB46C-17B9-469E-934C-015637BA86FC\" sourceRef=\"sid-590598C4-B0C6-4DCE-8C65-1B4C473964D2\" targetRef=\"task-01\"></sequenceFlow>\n    <exclusiveGateway id=\"sid-DF236505-2B41-497B-BB12-D5B36A65A489\" default=\"sid-59046FB9-ABD0-43B6-9FA0-916D6972573A\"></exclusiveGateway>\n    <sequenceFlow id=\"sid-D013FF31-68E1-4326-9A6D-520D9F03F11B\" sourceRef=\"task-01\" targetRef=\"sid-DF236505-2B41-497B-BB12-D5B36A65A489\"></sequenceFlow>\n    <userTask id=\"task-21\" name=\"HR 审批\"></userTask>\n    <endEvent id=\"sid-A0912D5A-0AEF-47E6-A798-A29CE1FAD7FF\"></endEvent>\n    <sequenceFlow id=\"sid-A57EA9A3-6926-415A-92E1-73B7F7D8BA13\" sourceRef=\"task-21\" targetRef=\"sid-A0912D5A-0AEF-47E6-A798-A29CE1FAD7FF\"></sequenceFlow>\n    <sequenceFlow id=\"sid-59046FB9-ABD0-43B6-9FA0-916D6972573A\" name=\"请假小于等于 1 天\" sourceRef=\"sid-DF236505-2B41-497B-BB12-D5B36A65A489\" targetRef=\"sid-A0912D5A-0AEF-47E6-A798-A29CE1FAD7FF\"></sequenceFlow>\n    <sequenceFlow id=\"sid-0CAF1537-A2F7-46D2-9807-77F81C8143A7\" name=\"请假大于 3 天\" sourceRef=\"sid-DF236505-2B41-497B-BB12-D5B36A65A489\" targetRef=\"task-21\">\n      <conditionExpression xsi:type=\"tFormalExpression\"><![CDATA[${day > 3}]]></conditionExpression>\n    </sequenceFlow>\n  </process>\n  <bpmndi:BPMNDiagram id=\"BPMNDiagram_oa_leave\">\n    <bpmndi:BPMNPlane bpmnElement=\"oa_leave\" id=\"BPMNPlane_oa_leave\">\n      <bpmndi:BPMNShape bpmnElement=\"sid-590598C4-B0C6-4DCE-8C65-1B4C473964D2\" id=\"BPMNShape_sid-590598C4-B0C6-4DCE-8C65-1B4C473964D2\">\n        <omgdc:Bounds height=\"30.0\" width=\"30.0\" x=\"203.5\" y=\"208.0\"></omgdc:Bounds>\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape bpmnElement=\"task-01\" id=\"BPMNShape_task-01\">\n        <omgdc:Bounds height=\"80.0\" width=\"100.0\" x=\"285.0\" y=\"183.0\"></omgdc:Bounds>\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape bpmnElement=\"sid-DF236505-2B41-497B-BB12-D5B36A65A489\" id=\"BPMNShape_sid-DF236505-2B41-497B-BB12-D5B36A65A489\">\n        <omgdc:Bounds height=\"40.0\" width=\"40.0\" x=\"423.5\" y=\"203.0\"></omgdc:Bounds>\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape bpmnElement=\"task-21\" id=\"BPMNShape_task-21\">\n        <omgdc:Bounds height=\"80.0\" width=\"100.0\" x=\"525.0\" y=\"60.0\"></omgdc:Bounds>\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape bpmnElement=\"sid-A0912D5A-0AEF-47E6-A798-A29CE1FAD7FF\" id=\"BPMNShape_sid-A0912D5A-0AEF-47E6-A798-A29CE1FAD7FF\">\n        <omgdc:Bounds height=\"28.0\" width=\"28.0\" x=\"750.0\" y=\"209.0\"></omgdc:Bounds>\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNEdge bpmnElement=\"sid-0CAF1537-A2F7-46D2-9807-77F81C8143A7\" id=\"BPMNEdge_sid-0CAF1537-A2F7-46D2-9807-77F81C8143A7\">\n        <omgdi:waypoint x=\"443.0\" y=\"203.0\"></omgdi:waypoint>\n        <omgdi:waypoint x=\"444.0\" y=\"100.0\"></omgdi:waypoint>\n        <omgdi:waypoint x=\"525.0\" y=\"100.0\"></omgdi:waypoint>\n        <bpmndi:BPMNLabel>\n          <omgdc:Bounds height=\"14.0\" width=\"68.0\" x=\"411.0\" y=\"127.0\"></omgdc:Bounds>\n        </bpmndi:BPMNLabel>\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge bpmnElement=\"sid-59046FB9-ABD0-43B6-9FA0-916D6972573A\" id=\"BPMNEdge_sid-59046FB9-ABD0-43B6-9FA0-916D6972573A\">\n        <omgdi:waypoint x=\"464.0\" y=\"223.0\"></omgdi:waypoint>\n        <omgdi:waypoint x=\"750.0\" y=\"223.0\"></omgdi:waypoint>\n        <bpmndi:BPMNLabel>\n          <omgdc:Bounds height=\"14.0\" width=\"90.0\" x=\"464.0\" y=\"198.0\"></omgdc:Bounds>\n        </bpmndi:BPMNLabel>\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge bpmnElement=\"sid-A57EA9A3-6926-415A-92E1-73B7F7D8BA13\" id=\"BPMNEdge_sid-A57EA9A3-6926-415A-92E1-73B7F7D8BA13\">\n        <omgdi:waypoint x=\"625.0\" y=\"132.0\"></omgdi:waypoint>\n        <omgdi:waypoint x=\"752.0\" y=\"215.0\"></omgdi:waypoint>\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge bpmnElement=\"sid-D013FF31-68E1-4326-9A6D-520D9F03F11B\" id=\"BPMNEdge_sid-D013FF31-68E1-4326-9A6D-520D9F03F11B\">\n        <omgdi:waypoint x=\"385.0\" y=\"223.0\"></omgdi:waypoint>\n        <omgdi:waypoint x=\"423.0\" y=\"223.0\"></omgdi:waypoint>\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge bpmnElement=\"sid-C49DB46C-17B9-469E-934C-015637BA86FC\" id=\"BPMNEdge_sid-C49DB46C-17B9-469E-934C-015637BA86FC\">\n        <omgdi:waypoint x=\"233.0\" y=\"223.0\"></omgdi:waypoint>\n        <omgdi:waypoint x=\"285.0\" y=\"223.0\"></omgdi:waypoint>\n      </bpmndi:BPMNEdge>\n    </bpmndi:BPMNPlane>\n  </bpmndi:BPMNDiagram>\n</definitions>"
        }
    },
    "msg": ""
}



http://api-dashboard.yudao.iocoder.cn/admin-api/bpm/task/list-by-process-instance-id?processInstanceId=88450163-998f-11ed-8497-b29457079be3
{
    "code": 0,
    "data": [
        {
            "id": "8846fd3b-998f-11ed-8497-b29457079be3",
            "name": "领导审批",
            "claimTime": null,
            "createTime": 1674307726000,
            "suspensionState": null,
            "processInstance": {
                "id": "88450163-998f-11ed-8497-b29457079be3",
                "name": "OA 请假",
                "startUserId": 1,
                "startUserNickname": "芋道源码",
                "processDefinitionId": "oa_leave:4:9a228696-0b26-11ed-a881-427d68986255"
            },
            "endTime": null,
            "durationInMillis": null,
            "result": 1,
            "reason": null,
            "definitionKey": "task-01",
            "assigneeUser": {
                "id": 1,
                "nickname": "芋道源码",
                "deptId": 103,
                "deptName": "研发部门"
            },
            "parentTaskId": null,
            "children": null
        }
    ],
    "msg": ""
}





http://api-dashboard.yudao.iocoder.cn/admin-api/bpm/activity/list?processInstanceId=88450163-998f-11ed-8497-b29457079be3
{
    "code": 0,
    "data": [
        {
            "key": "sid-590598C4-B0C6-4DCE-8C65-1B4C473964D2",
            "type": "startEvent",
            "startTime": 1674307726407,
            "endTime": 1674307726407,
            "taskId": null
        },
        {
            "key": "sid-C49DB46C-17B9-469E-934C-015637BA86FC",
            "type": "sequenceFlow",
            "startTime": 1674307726408,
            "endTime": 1674307726408,
            "taskId": null
        },
        {
            "key": "task-01",
            "type": "userTask",
            "startTime": 1674307726408,
            "endTime": null,
            "taskId": "8846fd3b-998f-11ed-8497-b29457079be3"
        }
    ],
    "msg": ""
}


http://api-dashboard.yudao.iocoder.cn/admin-api/bpm/process-definition/get-bpmn-xml?id=oa_leave:4:9a228696-0b26-11ed-a881-427d68986255
{
    "code": 0,
    "data": "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<definitions xmlns=\"http://www.omg.org/spec/BPMN/20100524/MODEL\" xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" xmlns:xsd=\"http://www.w3.org/2001/XMLSchema\" xmlns:flowable=\"http://flowable.org/bpmn\" xmlns:bpmndi=\"http://www.omg.org/spec/BPMN/20100524/DI\" xmlns:omgdc=\"http://www.omg.org/spec/DD/20100524/DC\" xmlns:omgdi=\"http://www.omg.org/spec/DD/20100524/DI\" typeLanguage=\"http://www.w3.org/2001/XMLSchema\" expressionLanguage=\"http://www.w3.org/1999/XPath\" targetNamespace=\"http://www.activiti.org/processdef\">\n  <process id=\"oa_leave\" name=\"OA 请假\" isExecutable=\"true\">\n    <startEvent id=\"sid-590598C4-B0C6-4DCE-8C65-1B4C473964D2\"></startEvent>\n    <userTask id=\"task-01\" name=\"领导审批\"></userTask>\n    <sequenceFlow id=\"sid-C49DB46C-17B9-469E-934C-015637BA86FC\" sourceRef=\"sid-590598C4-B0C6-4DCE-8C65-1B4C473964D2\" targetRef=\"task-01\"></sequenceFlow>\n    <exclusiveGateway id=\"sid-DF236505-2B41-497B-BB12-D5B36A65A489\" default=\"sid-59046FB9-ABD0-43B6-9FA0-916D6972573A\"></exclusiveGateway>\n    <sequenceFlow id=\"sid-D013FF31-68E1-4326-9A6D-520D9F03F11B\" sourceRef=\"task-01\" targetRef=\"sid-DF236505-2B41-497B-BB12-D5B36A65A489\"></sequenceFlow>\n    <userTask id=\"task-21\" name=\"HR 审批\"></userTask>\n    <endEvent id=\"sid-A0912D5A-0AEF-47E6-A798-A29CE1FAD7FF\"></endEvent>\n    <sequenceFlow id=\"sid-A57EA9A3-6926-415A-92E1-73B7F7D8BA13\" sourceRef=\"task-21\" targetRef=\"sid-A0912D5A-0AEF-47E6-A798-A29CE1FAD7FF\"></sequenceFlow>\n    <sequenceFlow id=\"sid-59046FB9-ABD0-43B6-9FA0-916D6972573A\" name=\"请假小于等于 1 天\" sourceRef=\"sid-DF236505-2B41-497B-BB12-D5B36A65A489\" targetRef=\"sid-A0912D5A-0AEF-47E6-A798-A29CE1FAD7FF\"></sequenceFlow>\n    <sequenceFlow id=\"sid-0CAF1537-A2F7-46D2-9807-77F81C8143A7\" name=\"请假大于 3 天\" sourceRef=\"sid-DF236505-2B41-497B-BB12-D5B36A65A489\" targetRef=\"task-21\">\n      <conditionExpression xsi:type=\"tFormalExpression\"><![CDATA[${day > 3}]]></conditionExpression>\n    </sequenceFlow>\n  </process>\n  <bpmndi:BPMNDiagram id=\"BPMNDiagram_oa_leave\">\n    <bpmndi:BPMNPlane bpmnElement=\"oa_leave\" id=\"BPMNPlane_oa_leave\">\n      <bpmndi:BPMNShape bpmnElement=\"sid-590598C4-B0C6-4DCE-8C65-1B4C473964D2\" id=\"BPMNShape_sid-590598C4-B0C6-4DCE-8C65-1B4C473964D2\">\n        <omgdc:Bounds height=\"30.0\" width=\"30.0\" x=\"203.5\" y=\"208.0\"></omgdc:Bounds>\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape bpmnElement=\"task-01\" id=\"BPMNShape_task-01\">\n        <omgdc:Bounds height=\"80.0\" width=\"100.0\" x=\"285.0\" y=\"183.0\"></omgdc:Bounds>\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape bpmnElement=\"sid-DF236505-2B41-497B-BB12-D5B36A65A489\" id=\"BPMNShape_sid-DF236505-2B41-497B-BB12-D5B36A65A489\">\n        <omgdc:Bounds height=\"40.0\" width=\"40.0\" x=\"423.5\" y=\"203.0\"></omgdc:Bounds>\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape bpmnElement=\"task-21\" id=\"BPMNShape_task-21\">\n        <omgdc:Bounds height=\"80.0\" width=\"100.0\" x=\"525.0\" y=\"60.0\"></omgdc:Bounds>\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape bpmnElement=\"sid-A0912D5A-0AEF-47E6-A798-A29CE1FAD7FF\" id=\"BPMNShape_sid-A0912D5A-0AEF-47E6-A798-A29CE1FAD7FF\">\n        <omgdc:Bounds height=\"28.0\" width=\"28.0\" x=\"750.0\" y=\"209.0\"></omgdc:Bounds>\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNEdge bpmnElement=\"sid-0CAF1537-A2F7-46D2-9807-77F81C8143A7\" id=\"BPMNEdge_sid-0CAF1537-A2F7-46D2-9807-77F81C8143A7\">\n        <omgdi:waypoint x=\"443.0\" y=\"203.0\"></omgdi:waypoint>\n        <omgdi:waypoint x=\"444.0\" y=\"100.0\"></omgdi:waypoint>\n        <omgdi:waypoint x=\"525.0\" y=\"100.0\"></omgdi:waypoint>\n        <bpmndi:BPMNLabel>\n          <omgdc:Bounds height=\"14.0\" width=\"68.0\" x=\"411.0\" y=\"127.0\"></omgdc:Bounds>\n        </bpmndi:BPMNLabel>\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge bpmnElement=\"sid-59046FB9-ABD0-43B6-9FA0-916D6972573A\" id=\"BPMNEdge_sid-59046FB9-ABD0-43B6-9FA0-916D6972573A\">\n        <omgdi:waypoint x=\"464.0\" y=\"223.0\"></omgdi:waypoint>\n        <omgdi:waypoint x=\"750.0\" y=\"223.0\"></omgdi:waypoint>\n        <bpmndi:BPMNLabel>\n          <omgdc:Bounds height=\"14.0\" width=\"90.0\" x=\"464.0\" y=\"198.0\"></omgdc:Bounds>\n        </bpmndi:BPMNLabel>\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge bpmnElement=\"sid-A57EA9A3-6926-415A-92E1-73B7F7D8BA13\" id=\"BPMNEdge_sid-A57EA9A3-6926-415A-92E1-73B7F7D8BA13\">\n        <omgdi:waypoint x=\"625.0\" y=\"132.0\"></omgdi:waypoint>\n        <omgdi:waypoint x=\"752.0\" y=\"215.0\"></omgdi:waypoint>\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge bpmnElement=\"sid-D013FF31-68E1-4326-9A6D-520D9F03F11B\" id=\"BPMNEdge_sid-D013FF31-68E1-4326-9A6D-520D9F03F11B\">\n        <omgdi:waypoint x=\"385.0\" y=\"223.0\"></omgdi:waypoint>\n        <omgdi:waypoint x=\"423.0\" y=\"223.0\"></omgdi:waypoint>\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge bpmnElement=\"sid-C49DB46C-17B9-469E-934C-015637BA86FC\" id=\"BPMNEdge_sid-C49DB46C-17B9-469E-934C-015637BA86FC\">\n        <omgdi:waypoint x=\"233.0\" y=\"223.0\"></omgdi:waypoint>\n        <omgdi:waypoint x=\"285.0\" y=\"223.0\"></omgdi:waypoint>\n      </bpmndi:BPMNEdge>\n    </bpmndi:BPMNPlane>\n  </bpmndi:BPMNDiagram>\n</definitions>",
    "msg": ""
}


http://api-dashboard.yudao.iocoder.cn/admin-api/bpm/oa/leave/get?id=34
{
    "code": 0,
    "data": {
        "startTime": 0,
        "endTime": 0,
        "type": 1,
        "reason": "",
        "id": 34,
        "result": 1,
        "createTime": 1674307726000,
        "processInstanceId": "88450163-998f-11ed-8497-b29457079be3"
    },
    "msg": ""
}
*/



/*
有完成和正在进行的
http://api-dashboard.yudao.iocoder.cn/admin-api/bpm/activity/list?processInstanceId=0e4b3b11-9b30-11ed-93bb-b29457079be3
{
    "code": 0,
    "data": [
        {
            "key": "Event_1cdh08d",
            "type": "startEvent",
            "startTime": 1674486621897,
            "endTime": 1674486621898,
            "taskId": null
        },
        {
            "key": "Flow_0ski964",
            "type": "sequenceFlow",
            "startTime": 1674486621898,
            "endTime": 1674486621898,
            "taskId": null
        },
        {
            "key": "task01",
            "type": "userTask",
            "startTime": 1674486621898,
            "endTime": 1674531211514,
            "taskId": "0e4c739b-9b30-11ed-93bb-b29457079be3"
        },
        {
            "key": "Flow_04zh2qw",
            "type": "sequenceFlow",
            "startTime": 1674531211518,
            "endTime": 1674531211518,
            "taskId": null
        },
        {
            "key": "task02",
            "type": "userTask",
            "startTime": 1674531211523,
            "endTime": null,
            "taskId": "dfc96c42-9b97-11ed-93bb-b29457079be3"
        }
    ],
    "msg": ""
}





http://api-dashboard.yudao.iocoder.cn/admin-api/bpm/process-instance/get?id=0e4b3b11-9b30-11ed-93bb-b29457079be3
{
    "code": 0,
    "data": {
        "id": "0e4b3b11-9b30-11ed-93bb-b29457079be3",
        "name": "测试流程",
        "category": "1",
        "status": 1,
        "result": 1,
        "createTime": 1674486622000,
        "endTime": null,
        "formVariables": {
            "F5oy5xmymr12p": 1,
            "Fywp5xmymr876": "2023-01-02"
        },
        "businessKey": null,
        "startUser": {
            "id": 1,
            "nickname": "芋道源码",
            "deptId": 103,
            "deptName": "研发部门"
        },
        "processDefinition": {
            "id": "test:10:64457386-9b08-11ed-93bb-b29457079be3",
            "formType": 10,
            "formId": 23,
            "formConf": "{\"form\":{\"labelPosition\":\"right\",\"size\":\"default\",\"labelWidth\":\"125px\",\"hideRequiredAsterisk\":false,\"showMessage\":true,\"inlineMessage\":false},\"submitBtn\":{\"show\":true,\"innerText\":\"提交\"},\"resetBtn\":{\"show\":true,\"innerText\":\"重置\"}}",
            "formFields": [
                "{\"type\":\"select\",\"field\":\"F5oy5xmymr12p\",\"title\":\"选择器\",\"info\":\"\",\"effect\":{\"fetch\":\"\"},\"options\":[{\"label\":\"选项1\",\"value\":1},{\"label\":\"选项2\",\"value\":2}],\"_fc_drag_tag\":\"select\",\"hidden\":false,\"display\":true}",
                "{\"type\":\"datePicker\",\"field\":\"Fywp5xmymr876\",\"title\":\"日期选择器\",\"info\":\"\",\"_fc_drag_tag\":\"datePicker\",\"hidden\":false,\"display\":true}"
            ],
            "formCustomCreatePath": null,
            "formCustomViewPath": null,
            "bpmnXml": "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<definitions xmlns=\"http://www.omg.org/spec/BPMN/20100524/MODEL\" xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" xmlns:xsd=\"http://www.w3.org/2001/XMLSchema\" xmlns:flowable=\"http://flowable.org/bpmn\" xmlns:bpmndi=\"http://www.omg.org/spec/BPMN/20100524/DI\" xmlns:omgdc=\"http://www.omg.org/spec/DD/20100524/DC\" xmlns:omgdi=\"http://www.omg.org/spec/DD/20100524/DI\" xmlns:bpmn2=\"http://www.omg.org/spec/BPMN/20100524/MODEL\" xmlns:dc=\"http://www.omg.org/spec/DD/20100524/DC\" xmlns:di=\"http://www.omg.org/spec/DD/20100524/DI\" typeLanguage=\"http://www.w3.org/2001/XMLSchema\" expressionLanguage=\"http://www.w3.org/1999/XPath\" targetNamespace=\"http://flowable.org/bpmn\" id=\"diagram_Process_1657960588001\">\n  <process id=\"test\" name=\"测试流程\" isExecutable=\"true\">\n    <startEvent id=\"Event_1cdh08d\"></startEvent>\n    <userTask id=\"task01\" name=\"领导审批\"></userTask>\n    <sequenceFlow id=\"Flow_0ski964\" sourceRef=\"Event_1cdh08d\" targetRef=\"task01\"></sequenceFlow>\n    <userTask id=\"task02\" name=\"HR 审批\"></userTask>\n    <sequenceFlow id=\"Flow_04zh2qw\" sourceRef=\"task01\" targetRef=\"task02\"></sequenceFlow>\n    <endEvent id=\"Event_071a8ic\"></endEvent>\n    <sequenceFlow id=\"Flow_0tc28rh\" sourceRef=\"task02\" targetRef=\"Event_071a8ic\"></sequenceFlow>\n  </process>\n  <bpmndi:BPMNDiagram id=\"BPMNDiagram_test\">\n    <bpmndi:BPMNPlane bpmnElement=\"test\" id=\"BPMNPlane_test\">\n      <bpmndi:BPMNShape bpmnElement=\"Event_1cdh08d\" id=\"BPMNShape_Event_1cdh08d\">\n        <omgdc:Bounds height=\"36.0\" width=\"36.0\" x=\"242.0\" y=\"312.0\"></omgdc:Bounds>\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape bpmnElement=\"task01\" id=\"BPMNShape_task01\">\n        <omgdc:Bounds height=\"80.0\" width=\"100.0\" x=\"360.0\" y=\"290.0\"></omgdc:Bounds>\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape bpmnElement=\"task02\" id=\"BPMNShape_task02\">\n        <omgdc:Bounds height=\"80.0\" width=\"100.0\" x=\"530.0\" y=\"290.0\"></omgdc:Bounds>\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape bpmnElement=\"Event_071a8ic\" id=\"BPMNShape_Event_071a8ic\">\n        <omgdc:Bounds height=\"36.0\" width=\"36.0\" x=\"692.0\" y=\"312.0\"></omgdc:Bounds>\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNEdge bpmnElement=\"Flow_0ski964\" id=\"BPMNEdge_Flow_0ski964\">\n        <omgdi:waypoint x=\"278.0\" y=\"330.0\"></omgdi:waypoint>\n        <omgdi:waypoint x=\"360.0\" y=\"330.0\"></omgdi:waypoint>\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge bpmnElement=\"Flow_04zh2qw\" id=\"BPMNEdge_Flow_04zh2qw\">\n        <omgdi:waypoint x=\"460.0\" y=\"330.0\"></omgdi:waypoint>\n        <omgdi:waypoint x=\"530.0\" y=\"330.0\"></omgdi:waypoint>\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge bpmnElement=\"Flow_0tc28rh\" id=\"BPMNEdge_Flow_0tc28rh\">\n        <omgdi:waypoint x=\"630.0\" y=\"330.0\"></omgdi:waypoint>\n        <omgdi:waypoint x=\"692.0\" y=\"330.0\"></omgdi:waypoint>\n      </bpmndi:BPMNEdge>\n    </bpmndi:BPMNPlane>\n  </bpmndi:BPMNDiagram>\n</definitions>"
        }
    },
    "msg": ""
}






http://api-dashboard.yudao.iocoder.cn/admin-api/bpm/task/list-by-process-instance-id?processInstanceId=0e4b3b11-9b30-11ed-93bb-b29457079be3
{
    "code": 0,
    "data": [
        {
            "id": "dfc96c42-9b97-11ed-93bb-b29457079be3",
            "name": "HR 审批",
            "claimTime": null,
            "createTime": 1674531212000,
            "suspensionState": null,
            "processInstance": {
                "id": "0e4b3b11-9b30-11ed-93bb-b29457079be3",
                "name": "测试流程",
                "startUserId": 1,
                "startUserNickname": "芋道源码",
                "processDefinitionId": "test:10:64457386-9b08-11ed-93bb-b29457079be3"
            },
            "endTime": null,
            "durationInMillis": null,
            "result": 1,
            "reason": null,
            "definitionKey": "task02",
            "assigneeUser": {
                "id": 104,
                "nickname": "测试号",
                "deptId": 107,
                "deptName": "运维部门"
            },
            "parentTaskId": null,
            "children": null
        },
        {
            "id": "0e4c739b-9b30-11ed-93bb-b29457079be3",
            "name": "领导审批",
            "claimTime": null,
            "createTime": 1674486622000,
            "suspensionState": null,
            "processInstance": {
                "id": "0e4b3b11-9b30-11ed-93bb-b29457079be3",
                "name": "测试流程",
                "startUserId": 1,
                "startUserNickname": "芋道源码",
                "processDefinitionId": "test:10:64457386-9b08-11ed-93bb-b29457079be3"
            },
            "endTime": 1674531211000,
            "durationInMillis": 44589594,
            "result": 2,
            "reason": "123",
            "definitionKey": "task01",
            "assigneeUser": {
                "id": 1,
                "nickname": "芋道源码",
                "deptId": 103,
                "deptName": "研发部门"
            },
            "parentTaskId": null,
            "children": null
        }
    ],
    "msg": ""
}


http://api-dashboard.yudao.iocoder.cn/admin-api/bpm/process-definition/get-bpmn-xml?id=test:10:64457386-9b08-11ed-93bb-b29457079be3
{
    "code": 0,
    "data": "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<definitions xmlns=\"http://www.omg.org/spec/BPMN/20100524/MODEL\" xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" xmlns:xsd=\"http://www.w3.org/2001/XMLSchema\" xmlns:flowable=\"http://flowable.org/bpmn\" xmlns:bpmndi=\"http://www.omg.org/spec/BPMN/20100524/DI\" xmlns:omgdc=\"http://www.omg.org/spec/DD/20100524/DC\" xmlns:omgdi=\"http://www.omg.org/spec/DD/20100524/DI\" xmlns:bpmn2=\"http://www.omg.org/spec/BPMN/20100524/MODEL\" xmlns:dc=\"http://www.omg.org/spec/DD/20100524/DC\" xmlns:di=\"http://www.omg.org/spec/DD/20100524/DI\" typeLanguage=\"http://www.w3.org/2001/XMLSchema\" expressionLanguage=\"http://www.w3.org/1999/XPath\" targetNamespace=\"http://flowable.org/bpmn\" id=\"diagram_Process_1657960588001\">\n  <process id=\"test\" name=\"测试流程\" isExecutable=\"true\">\n    <startEvent id=\"Event_1cdh08d\"></startEvent>\n    <userTask id=\"task01\" name=\"领导审批\"></userTask>\n    <sequenceFlow id=\"Flow_0ski964\" sourceRef=\"Event_1cdh08d\" targetRef=\"task01\"></sequenceFlow>\n    <userTask id=\"task02\" name=\"HR 审批\"></userTask>\n    <sequenceFlow id=\"Flow_04zh2qw\" sourceRef=\"task01\" targetRef=\"task02\"></sequenceFlow>\n    <endEvent id=\"Event_071a8ic\"></endEvent>\n    <sequenceFlow id=\"Flow_0tc28rh\" sourceRef=\"task02\" targetRef=\"Event_071a8ic\"></sequenceFlow>\n  </process>\n  <bpmndi:BPMNDiagram id=\"BPMNDiagram_test\">\n    <bpmndi:BPMNPlane bpmnElement=\"test\" id=\"BPMNPlane_test\">\n      <bpmndi:BPMNShape bpmnElement=\"Event_1cdh08d\" id=\"BPMNShape_Event_1cdh08d\">\n        <omgdc:Bounds height=\"36.0\" width=\"36.0\" x=\"242.0\" y=\"312.0\"></omgdc:Bounds>\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape bpmnElement=\"task01\" id=\"BPMNShape_task01\">\n        <omgdc:Bounds height=\"80.0\" width=\"100.0\" x=\"360.0\" y=\"290.0\"></omgdc:Bounds>\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape bpmnElement=\"task02\" id=\"BPMNShape_task02\">\n        <omgdc:Bounds height=\"80.0\" width=\"100.0\" x=\"530.0\" y=\"290.0\"></omgdc:Bounds>\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape bpmnElement=\"Event_071a8ic\" id=\"BPMNShape_Event_071a8ic\">\n        <omgdc:Bounds height=\"36.0\" width=\"36.0\" x=\"692.0\" y=\"312.0\"></omgdc:Bounds>\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNEdge bpmnElement=\"Flow_0ski964\" id=\"BPMNEdge_Flow_0ski964\">\n        <omgdi:waypoint x=\"278.0\" y=\"330.0\"></omgdi:waypoint>\n        <omgdi:waypoint x=\"360.0\" y=\"330.0\"></omgdi:waypoint>\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge bpmnElement=\"Flow_04zh2qw\" id=\"BPMNEdge_Flow_04zh2qw\">\n        <omgdi:waypoint x=\"460.0\" y=\"330.0\"></omgdi:waypoint>\n        <omgdi:waypoint x=\"530.0\" y=\"330.0\"></omgdi:waypoint>\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge bpmnElement=\"Flow_0tc28rh\" id=\"BPMNEdge_Flow_0tc28rh\">\n        <omgdi:waypoint x=\"630.0\" y=\"330.0\"></omgdi:waypoint>\n        <omgdi:waypoint x=\"692.0\" y=\"330.0\"></omgdi:waypoint>\n      </bpmndi:BPMNEdge>\n    </bpmndi:BPMNPlane>\n  </bpmndi:BPMNDiagram>\n</definitions>",
    "msg": ""
}





*/
</script>
<style>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.box-card {
  width: 1400px;
  height: 740px;
}
</style>

